<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script src="/js/layer.js"></script>
<style>
    #tools .el-card__body {
        padding: 5px 5px 5px 20px;
    }
    #tools .el-button {
        padding: 10px 8px 10px 5px;
    }

    .el-input__inner {
        height: 38px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .el-card {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 2px;
    }


    .el-pagination {
        margin-top: 5px;
    }
    /*表格操作栏 自定义样式*/
    .el-link {
        margin-right:8px;
    }
    #app {
        height:100%;
    }
    .box-card .el-card__body {
        height:40px;
    }
    #table {
        height:calc(100% - 122px);
    }
</style>
<div id="app">
    <!--    查询框-->
    <el-card class="box-card">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="计划名称">
                <el-input clearable v-model="searchForm.name" placeholder="请输入查询的计划名称" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="计划时间">
                <el-date-picker
                        v-model="searchForm.time"
                        type="date"
                        value-format="yyyy/MM/dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" size="large" @click="searchDirllPlanHandle">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!--工具栏-->
    <el-card id="tools">
        <el-row>
            <el-button size="small" icon="el-icon-document-add" type="primary" @click="addPlan">
                添加计划
            </el-button>
        </el-row>
    </el-card>
    <!--    查询数据展示表格-->
    <el-card id="table">
        <el-table
                border
                :stripe="true"
                :data="planList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column prop="planName" label="计划名称">
            </el-table-column>
            <el-table-column
                    prop="exerciseScriptID.scriptName"
                    label="脚本名称"
            width="180">
            </el-table-column>
            <el-table-column
                    prop="createtime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="exerciseTime"
                    label="演练时间">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="说明文件(点击查看)"
                    wdith="100">
                <template slot-scope="scope">
                    <a v-if="scope.row.content==null?false:true" :href=`/assumption/${scope.row.content}` target="_blank">{{scope.row.content}}</a>
                    <span v-else>暂无说明文件</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="366">
                <template slot-scope="scope">
                    <el-link size="mini" icon="el-icon-paperclip" type="primary" @click="bindRoleAction(scope.$index,scope.row)">绑定角色</el-link>
                    <el-link size="mini" icon="el-icon-upload" type="success" @click="uploadFileAction(scope.$index,scope.row)">上传说明文件</el-link>
                    <el-popconfirm title="确定要删除该计划吗？" @confirm="planDelete(scope.$index, scope.row)">
                        <el-link slot="reference" size="mini" icon="el-icon-delete" type="danger">删除</el-link>
                    </el-popconfirm>
                    <el-link size="mini" icon="el-icon-paperclip" type="primary" @click="initExercise(scope.row.planid)">进入演练</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="planList.length">
        </el-pagination>
    </el-card>
</div>
<script>
    var planid,scriptid;
    //上传说明文件的计划id
    var uploadPlanid;
    var vue = new Vue({
        el: "#app",
        data() {
            return {
                //翻页相关数据
                currentPage: 1,
                pageSize: 10,
                //查询表单
                searchForm: {
                    name: '',
                    time: undefined,
                    page:1,
                    size:9999999
                },
                planList:[],
                formLabelWidth: '120px',
            }
        },
        mounted() {
            //查询演练计划
            this.searchDirllPlan();
        },
        methods: {
            //查询页码纠正
            deleteCorrect2(data){
                const totalPage = Math.ceil(data.length / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //最后一页最后一条数据删除时，页码纠正
            deleteCorrect(data,namuber){
                const totalPage = Math.ceil((data.length - namuber) / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //页码相关
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            addPlan() {
                layer.open({
                    type: 2,
                    title: '添加演练计划',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['450px', '400px'],
                    content: '/dialog/dirll/addPlan.html'
                });
            },
            //添加文件事件
            uploadFile(file, fileList) {
                //获取到图片链接
                this.file = fileList[0].raw;
            },
            //手动查询演练计划
            searchDirllPlanHandle(){
                if(this.searchForm.name == "" && this.searchForm.time == undefined){
                    this.$message.error("请输入计划名称或选择计划时间！");
                }else{
                    this.searchDirllPlan();
                }
            },
            //查询演练计划
            searchDirllPlan(){
                let data = {
                    name:this.searchForm.name,
                    time:this.searchForm.time,
                    page:1,
                    size:999
                };
                axios.get('/plan/list',{params:data}).then(res=>{
                    if(res.data.success){
                            this.planList = res.data.content;
                            this.deleteCorrect2(this.planList);
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //删除计划
            planDelete(index,row){
                let formData = new FormData();
                let idArray = [];
                idArray.push(row.planid);
                formData.append("id",idArray);
                axios.post('/plan/delete',formData).then(res=>{
                    if(res.data.success){
                        this.$message.success("删除成功！");
                        this.deleteCorrect(this.planList,1);
                        //刷新计划列表
                        this.searchDirllPlan();
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //绑定角色操作
            bindRoleAction(index,row){
                //保存计划id
                planid = row.planid;
                //保存脚本id
                scriptid = row.exerciseScriptID.scriptid;
                //弹窗
                layer.open({
                    type: 2,
                    title: '绑定角色',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['650px', '450px'],
                    content: '/dialog/dirll/bindRole.html'
                });
            },
            //上传说明文件操作
            uploadFileAction(index,row){
                //保存计划id
                uploadPlanid = row.planid;
                //弹窗
                layer.open({
                    type: 2,
                    title: '上传演练说明文件',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['400px', '260px'],
                    content: '/dialog/dirll/uploadDesFile.html'
                });

            },
            initExercise(id){
            	var url = '/exercise/init';
            	let formData = new FormData();
                formData.append("planid",id);
                axios.post(url,formData).then(res=>{
                    if(res.data.success){
                        this.$message.success("初始化成功！");
                        //刷新计划列表
                        setTimeout(function(){
                        	location.href = '/#/dirll/readyDirll';
                        },3000);
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        }
    })
</script>
</body>
</html>